<template>
  <div class="IndexHead">
    <div class="min">
      <!--    log-->
      <img src="../../../assets/images/logo.png" class="logimg" />
      <!--      输入框-->
      <div class="search">
        <el-input
          v-model="input"
          placeholder="搜索课程"
          class="searchClass"
          onSubmit="return false"
           @keyup.enter.native="fuzzySearch"
        ></el-input>
        <el-button type="primary" icon="el-icon-search" @click.native="searchJump">搜索</el-button>
      </div>
      <!--    登入注册-->
      <div class="enter">
        <!-- 购物车小图标 -->
        <i class="el-icon-shopping-cart-2"> </i> |
        <span @click="toLoginValue" v-if="userInfo === null">
          <span> 登录/注册 </span> <i class="el-icon-user-solid"></i>
        </span>

        <el-dropdown :disabled="false">
          <span class="el-dropdown-link">
            <div v-if="userInfo != null">
              {{ userInfo.nickname }}
              <img :src="userInfo.avatarUrl" alt="" class="imgStyle" />
            </div>
            <div></div>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="a">
              <span @click="toUserCenter(1)">个人中心</span></el-dropdown-item
            >
            <el-dropdown-item command="b"
              ><span @click="toUserCenter(2)">我的课程</span></el-dropdown-item
            >
            <el-dropdown-item command="c"
              ><span @click="toUserCenter(3)">我的订单</span></el-dropdown-item
            >
            <el-dropdown-item command="c"
              ><span @click="logout">退出登录</span></el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div>
      <!--     下拉导航-->
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item index="1"
          ><span @click="goIndex">首页</span></el-menu-item
        >
        <el-submenu index="2">
          <template slot="title">课程分类</template>
          <el-menu-item
            @click="gotoTwoLay(i.subjectId)"
            index="3"
            v-for="(i, index) in courselist"
            :key="index"
            >{{ i.subjectTitle }}</el-menu-item
          >
        </el-submenu>
        <el-menu-item index="4"
          ><a href="https://www.ele.me" target="_blank"
            >专属课程</a
          ></el-menu-item
        >
      </el-menu>
    </div>
    <LoginDiaLog :toLogin="toLogin" v-if="userInfo === null"></LoginDiaLog>
  </div>
</template>

<script>
import LoginDiaLog from "../../../components/LoginDiaLog";
import { mapState } from "vuex";
import { exitLogin, getMyCourse} from "../../../api/userCenter-api";
import { courselistt } from "@/api/index-api";

export default {
  name: "IndexHead",
  data() {
    return {
      input: "",
      activeIndex: "",
      toLogin: 1,
      num: 0,
      courselist: [],
    };
  },
  components: {
    LoginDiaLog,
  },
  methods: {
    // 给登录组件传一个参数,通过数据监听可以重复打开登录界面
    toLoginValue() {
      this.toLogin = this.num++;
    },
    // 点击个人中心跳转网页
    toUserCenter(data) {
      this.$router.push({ path: "/UserCenterLayOut?id=" + data });
      this.$store.commit("moidfypageNum", { pageNum: data });
      getMyCourse().then(res=>{
        console.log(res)
      })
    },
  // 退出登录
    logout() {
      exitLogin().then((res) => {
        if (res.code === 0) {
          this.$message({
            showClose: true,
            message: "退出登录成功",
            type: "success",
          });
          this.$router.push({ path: "/" });
          this.$store.commit("modifyUserInfo", { userInfo: null });
        }
      });
    },

    handleSelect(key, keyPath) {
      key, keyPath;
    },
    // 点击课程分类跳转到搜索界面
    gotoTwoLay(data) {
      // this.$router.push({path:"/TwoLay?clssID="+`${data}`})
      this.$router.push({ path: "/SearchClass", query: { id: data } });
      this.$store.commit("moidfyVuexTopicListId", { vuexTopicListId: data });
      
    },
    // 点击首页回到首页
    goIndex() {
      this.$router.push({ path: "/" });
    },
    // 搜索框点击enter键跳转
    fuzzySearch() {
      this.$store.commit("moidfyVuexKeyWord", { vuexKeyWord: this.input });
      this.$router.push({ path: "/SearchClass" });
    },
    // 修改vuex中的keyword值,跳转网页
    searchJump(){
         this.$store.commit("moidfyVuexKeyWord", { vuexKeyWord: this.input });
      this.$router.push({ path: "/SearchClass" });
    }
  },
  computed: {
    ...mapState(["userInfo", "vuexTopicListId"]),
  },

  created() {
    courselistt().then((res) => {
      this.courselist = res.rows;
    });
  },
};
</script>

<style scoped lang="less">
.min {
  height: 106px;
  display: flex;

  justify-content: space-between;
  .logimg {
    width: 200px;
    height: 55px;
    margin-top: 22px;
  }
  .search {
    display: flex;
    .el-button--primary {
      height: 44px;
      margin-top: 29px;
    }
  }
  .enter {
    width: 200px;
    height: 55px;
    margin-top: 40px;
    padding: 0 8px;

    /deep/ .el-icon-shopping-cart-2:before {
      font-size: 20px;
    }
  }
}
/deep/ .el-input.is-active /deep/ .el-input__inner,
/deep/ .el-input__inner:focus {
  border-color: #c6ff40;
}
/deep/ .el-input__inner {
  border-radius: 20px;
  width: 400px;
  margin: 30px 0 0;
}
/deep/ .el-menu.el-menu--horizontal {
  border-bottom: solid 1px #fff;
}
/deep/.el-menu{
  margin-top: -17px;    
}
 /deep/.el-menu-item{
   padding-left: 0;
 }
.IndexHead {
  width: 1200px;
  margin: 0 auto;
}
span {
  a {
    color: rgba(0, 0, 0, 0.65);
  }
}
.el-dropdown-link {
  cursor: pointer;
  color: rgba(0, 0, 0, 0.65);
}
.el-icon-arrow-down {
  font-size: 12px;
}

/deep/.el-input__inner,
.searchClass {
  margin: 30px 0;
  width: 400px;
}
/deep/.el-input__inner {
  margin: 0;
  width: 100%;
}
.imgStyle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  vertical-align: middle;
}
/deep/.min .search .el-button--primary {
    height: 40px;
    margin-top: 29px;
    position: relative;
    left: -16px;
    top: 1px;
    border-radius: 0 20px 20px 0;
    background: rgb(0, 207, 140);
    color: white;
}
</style>